<template>
	<view class="content">
		<u-navbar :fixed="false" title="申请注册" :autoBack="true" :safeAreaInsetTop="true" leftIconColor="#fff">
		</u-navbar>

		<view class="content_main">


			<u--form labelPosition="left" :model="enrollFormData" :rules="enrollRules" ref="uForm" labelWidth="90"
				:labelStyle="{fontSize:'12px',fontWeight:600}" class="FormDataBox">

				<u-form-item label="所在企业" prop="Enterprise" required labelWidth="90" borderBottom>
					<uni-easyinput type="text" v-model="enrollFormData.Enterprise" @blur="ValidataFun"
						:inputBorder="false" trim="all" :clearable="false" placeholder="请输入所在企业名称"></uni-easyinput>
				</u-form-item>

				<u-form-item label="社会信用代码" prop="Code" required labelWidth="90" borderBottom>
					<uni-easyinput type="text" v-model="enrollFormData.Code" @blur="ValidataFun" :inputBorder="false"
						trim="all" :clearable="false" placeholder="请输入"></uni-easyinput>
				</u-form-item>

				<u-form-item label="行业类型" prop="IndustryType" required @click="openBaseScreen('行业类型','other')"
					labelWidth="90" borderBottom>
					<uni-easyinput type="text" v-model="enrollFormData.IndustryType" :readonly="true"
						:inputBorder="false" trim="all" :clearable="false" placeholder="请选择"
						suffixIcon="right"></uni-easyinput>
				</u-form-item>

				<u-form-item label="员工规模" prop="EmployeeNums" required @click="openBaseScreen('员工规模','radio')"
					labelWidth="90" borderBottom>
					<uni-easyinput type="text" v-model="enrollFormData.EmployeeNums" :readonly="true"
						:inputBorder="false" trim="all" :clearable="false" placeholder="请选择"
						suffixIcon="right"></uni-easyinput>
				</u-form-item>

				<u-form-item label="联系人" prop="ContactPerson" required labelWidth="90" borderBottom>
					<uni-easyinput type="text" v-model="enrollFormData.ContactPerson" @blur="ValidataFun"
						:inputBorder="false" trim="all" :clearable="false" placeholder="请输入联系人名称"></uni-easyinput>
				</u-form-item>

				<u-form-item label="联系地址" prop="Address" required labelWidth="90" borderBottom>
					<uni-easyinput type="text" v-model="enrollFormData.Address" @blur="ValidataFun" :inputBorder="false"
						trim="all" :clearable="false" placeholder="请输入"></uni-easyinput>
				</u-form-item>

				<u-form-item label="联系电话" prop="ContactNumber" required labelWidth="90" borderBottom>
					<uni-easyinput type="tel" v-model="enrollFormData.ContactNumber" @blur="ValidataFun"
						:inputBorder="false" trim="all" :clearable="false" placeholder="请输入联系电话"></uni-easyinput>
				</u-form-item>

				<u-form-item label="邮箱" prop="Email" labelWidth="90">
					<uni-easyinput type="text" v-model="enrollFormData.Email" :inputBorder="false" trim="all"
						:clearable="false" placeholder="(选填)"></uni-easyinput>
				</u-form-item>
			</u--form>


			<view class="BtnBox">

				<button class="enrollBtn" type="primary" :loading="IsLoading" :disabled="IsLoading" @click="enrollBtn">
					<text class="Text">立即注册</text>
				</button>
			</view>

		</view>
	</view>
</template>

<script>
	import Company_Employee from '@/static/MorkData/MorkData.js';
	export default {
		data() {
			return {
				// 注册
				enrollFormData: {
					CorporatePicture: '', // 公司照片
					Enterprise: '', // 公司名称
					Code: '', // 社会行用代码

					IndustryType: '', // 行业类型
					IndustryTypeID: '',

					EmployeeNums: null, // 员工规模
					EmployeeID: null,

					ContactPerson: '', // 联系人
					Address: '', // 联系地址
					ContactNumber: '', // 联系电话

					Email: '',
				},
				enrollRules: {
					'Enterprise': {
						type: 'string',
						required: true,
						message: '企业名称不能为空',
						trigger: ['change', 'blur']
					},
					'Code': [{
						type: 'string',
						required: true,
						message: '请填写社会信用代码',
						trigger: ['change', 'blur']
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							console.log(this.isValidUnifiedSocialCreditIdentifier(value));
							// 上面有说，返回true表示校验通过，返回false表示不通过
							return this.isValidUnifiedSocialCreditIdentifier(value);
						},
						message: '社会信用代码格式不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					'IndustryType': {
						type: 'string',
						required: true,
						message: '行业类型不能为空',
						trigger: ['change']
					},
					'EmployeeNums': {
						type: 'string',
						required: true,
						message: '员工规模不能为空',
						trigger: ['change']
					},
					'ContactPerson': {
						type: 'string',
						required: true,
						message: '联系人不能为空',
						trigger: ['change', 'blur']
					},
					'ContactNumber': [{
						type: 'number',
						required: true,
						max: 11,
						message: '联系电话不能为空',
						trigger: ['change', 'blur']
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}]
				},
				Company_Type: [], // 行业类型数据
				Company_Type_Choice: {},

				Company_EmployeeData: [], // 员工规模数据

				IsLoading: false,
			};
		},
		onLoad() {

			this.Company_EmployeeData = JSON.parse(JSON.stringify(Company_Employee.Company_Employee()))

			this.Company_Type = JSON.parse(JSON.stringify(Company_Employee.Company_Type()))
		},
		mounted() {
			let that = this;
			uni.$on('Company_Choice', function(ret) {
				if (ret.type == '行业类型') {
					that.Company_Type_Choice = ret.data;

					let data = {
						IndustryType: ret.data.Child[0].TitleText,
						IndustryTypeID: ret.data.Child[0].ID,
					}
					that.enrollFormData = Object.assign(that.enrollFormData, data);

				} else if (ret.type == '员工规模') {
					that.enrollFormData = Object.assign(that.enrollFormData, ret.data);
				}

				that.ValidataFun();
			})
		},
		methods: {

			isValidUnifiedSocialCreditIdentifier(usci) { // 判断是否为社会信用代码
				const regex = /^[0-9ABCDEFGHJKLMNPQRTUWXY]{2}\d{6}[0-9ABCDEFGHJKLMNPQRTUWXY]{10}$/;
				return regex.test(usci);
			},
			ValidataFun() {
				let that = this;
				setTimeout(() => {
					that.$refs.uForm.validate();
				}, 100)
			},
			openBaseScreen(str, type) {
				let that = this;

				if (type == 'radio') {
					let obj = null;
					let url = '/commonPage/Tool/baseScreen';

					if (str == '员工规模') {
						obj = {
							allowClear: false,
							cmd: '',
							type: str,
							ListeningName: 'Company_Choice',
							// multiple: false,
							serverSearch: {
								isPaging: false, //是否分页
								// searchKey: '', //搜索关键词，应包含在param中
								showText: 'EmployeeNums', //查询结果显示的字段
								ChoiceDataKey: 'EmployeeID',
								ChoiceDataData: this.enrollFormData.EmployeeID,
							},
							param: {
								data: JSON.parse(JSON.stringify(that.Company_EmployeeData))
							}
						};

						url = '/commonPage/Tool/baseScreen?select=1';
					}


					this.$store.commit('ChangeAndSetStateData', {
						Name1: 'BaseScreenParm',
						data: obj
					})

					uni.navigateTo({
						url: url,
						fail: function(err) {
							console.log(err)
						}
					})
				} else if (type == 'other') {
					let obj = null;
					let url = '';

					if (str == '行业类型') {
						url = '/commonPage/Tool/FoldBaseScreen';

						obj = {
							type: str,
							ListeningName: 'Company_Choice',
							serverSearch: {
								// searchKey: '', //搜索关键词，应包含在param中
								showText_Fahter: 'Title', //查询结果显示的字段
								showText_Son: 'TitleText', //查询结果显示的字段
								ChoiceDataKey: 'ID',
								ChoiceDataData: this.Company_Type_Choice,
							},
							param: {
								data: JSON.parse(JSON.stringify(that.Company_Type))
							}
						}

					}


					this.$store.commit('ChangeAndSetStateData', {
						Name1: 'BaseScreenParm',
						data: obj
					})


					uni.navigateTo({
						url: url,
						fail: function(err) {
							console.log(err)
						}
					})
				}
			},
			enrollBtn() { // 注册按钮
				let that = this;
				that.$refs.uForm.validate().then(ret => {

					let obj = {
						CompanyName: that.enrollFormData.Enterprise, // 企业名称
						SMEC: that.enrollFormData.Code, // 企业信用代码
						IndustryType: that.enrollFormData.IndustryType, // 行业类型
						StaffSize: that.enrollFormData.EmployeeNums, // 员工规模
						LinkMan: that.enrollFormData.ContactPerson, // 联系人
						Address: that.enrollFormData.Address, // 地址
						Tel: that.enrollFormData.ContactNumber, // 电话
						Email: that.enrollFormData.Email, // 邮箱
					};
					that.$utils.showLoading('正在提交注册')



					try {

						that.Request.request('ApplyOpenQMS', obj, function(res) {

							// 检查状态码  
							if (ret.status == 200) {
								setTimeout(() => {
									that.$utils.hideLoading();
									uni.showToast({
										title: '已提交注册申请'
									})
									setTimeout(() => {
										uni.navigateBack();
									}, 1000)
								}, 1000);


								// 如果状态码是200，则延迟一秒执行后续操作  
								// setTimeout(() => {
								// 	that.$utils.hideLoading();
								// 	that.togetherBtn('Login'); // 假设这个方法不依赖于res.data的内容  
								// }, 1000);
							} else {
								// 如果状态码不是200，则立即隐藏加载提示  
								that.$utils.hideLoading();
							}

							// 显示提示消息  
							let toastTitle;
							try {
								// 尝试获取res.data.ds[0]['RMS']  
								toastTitle = res.data.ds[0]['RMS'];
							} catch (error) {
								// 如果访问过程中发生错误（例如数组越界或属性不存在），则设置一个默认消息  
								toastTitle = '注册失败，请重试';
								// 这里也可以添加额外的错误处理逻辑  
							}

							// 无论状态码如何，都显示提示消息  
							uni.showToast({
								title: toastTitle,
								icon: 'none',
								duration: 2000
							});

						})

					} catch (e) {
						that.$utils.hideLoading()
						//TODO handle the exception
					}



				}).catch(errors => {
					if (Array.isArray(errors)) {
						uni.$u.toast('请完善表单')
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f4f4f4;
	}


	.content_main {

		// 表单内容
		.FormDataBox {
			padding: 0 10px 0 20px !important;
			background-color: #fff;
			// width: 90%;
			// margin: 0 auto; 

			// 输入框上层类名
			.uni-easyinput__content {
				background-color: transparent !important;
				border: none !important;
				// border-bottom: 1px solid #c6c6c6 !important;
			}

			// 下拉框
			.uni-select {
				background-color: transparent !important;
				border: none !important;
				padding: 0 28rpx !important;

				.uni-select__input-placeholder {
					color: #999;
				}
			}


			// 给底部增加一条线
			.uni-easyinput__content::after,
			.uni-select::after {
				position: absolute;
				box-sizing: border-box;
				content: ' ';
				pointer-events: none;
				right: 16px;
				bottom: 0;
				left: 16px;
				border-bottom: 1px solid #d8d8d8;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
			}


			// 
			u-checkbox__icon-wrap {
				background-color: transparent !important;
			}

		}

		.BtnBox {
			width: 100%;
			margin-top: 40px;

			.enrollBtn {
				background-color: #51d0d0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 90%;
				margin: 0 auto;
				// color: #fff;

				.Text {
					margin-left: 10px;
				}
			}

			// 按钮的边框线在这里去除
			uni-button:after {
				border: none !important;
			}
		}

	}
</style>